<template>
  <div class="domain">
    <div
      class="domain-item"
      v-for="domain in mainData"
      :key="domain.id"
      :class="{ 'is-active': checked === domain.id }"
      @click="domainClick(domain)"
    >
      <div class="domain-item-left">
        <img
          style="width: 64px; height: 64px; float: right"
          :src="domain.imgSrc"
        />
      </div>
      <div
        class="domain-item-right"
        :class="{ 'is-active': checked === domain.id }"
      >
        {{ domain.name }}：{{ domain.floors
        }}{{ bimType === 1 ? '层' : '段' }}
        <div>{{ domain.description }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAction } from '@/utils/helper'
import { zoningQuery } from '@/api/assets'
import axios from 'axios'

let _layerManager, _layers

export default {
  name: 'Domain',
  props: ['activeStage', 'bimNumber'],
  data() {
    return {
      mainData: [],
      checked: '',
      layerId: '',
      stageId: '',
      bimType: 0
    }
  },
  computed: {
    defaultViewId() {
      return this.$store.state.layer.defaultViewId
    }
  },
  async created() {
    const { layerManager } = await getAction(
      this.defaultViewId
    )
    _layerManager = layerManager
  },
  mounted() {
    this.layerId = this.activeStage.layerId
    this.stageId = this.activeStage.stageId
    this.bimType = this.activeStage.bimType
    this.dataMounted()
  },
  beforeDestroy() {
    if (_layers) {
      _layers.forEach((layer) => {
        layer.updateAllObjsVisible &&
          layer.updateAllObjsVisible(true)
      })
    }
  },
  methods: {
    dataMounted() {
      if (this.bimNumber) {
        if (this.bimType === 1) {
          zoningQuery({ code: this.bimNumber }).then(
            (res) => {
              console.log(res)
              if (res.success) {
                this.mainData = []
                res.data.forEach((item, index) => {
                  const obj = {
                    id: index + 1,
                    name: item.name,
                    floors: item.floorLocation,
                    description: item.description,
                    // imgSrc2: item.fileInfos[0].filePath,
                    imgSrc: require('../../../../assets/bim/life.png')
                  }
                  this.mainData.push(obj)
                })
              }
            }
          )
        } else {
          zoningQuery({ code: this.bimNumber }).then(
            (res) => {
              console.log(res)
              if (res.success) {
                this.mainData = []
                res.data.forEach((item, index) => {
                  const obj = {
                    id: index + 1,
                    name: item.name,
                    floors: item.floorLocation,
                    description: item.description,
                    imgSrc: require('../../../../assets/bim/life.png')
                  }
                  this.mainData.push(obj)
                })
              }
            }
          )
        }
      }
    },
    // 功能分区点击事件
    domainClick(domain) {
      console.log('domainClick', domain)
      this.checked = domain.id
      // this.$emit('domainClick', domain)

      const find = _layerManager.layers.find(
        (item) => item.id === this.activeStage.layerId
      )
      if (find) {
        _layers = find.layer
        if (this.activeStage.dataService) {
          const dataService = decodeURI(
            this.activeStage.dataService
          )
          const url =
            dataService.substring(
              0,
              dataService.indexOf('/rest/data/') +
                '/rest/data/'.length
            ) + 'featureResults.rjson?returnContent=true'
          const list = dataService
            .substring(
              dataService.indexOf(
                '/rest/data/datasources/'
              ) + '/rest/data/datasources/'.length
            )
            .split('/datasets/')
          const sqlParameter = {
            datasetNames: [list.join(':')],
            getFeatureMode: 'SQL',
            queryParameter: {
              attributeFilter: `floor_number="F${domain.floors}"`,
              fields: ['smid', 'floor_number']
            }
          }
          axios
            .post(url, JSON.stringify(sqlParameter))
            .then((res) => {
              // console.log('查询结果', res)
              if (res.data && res.data.features) {
                const ids = res.data.features.map(
                  (item) => item.fieldValues[0]
                )
                // console.log('过滤id', ids)
                _layers.forEach((layer) => {
                  layer.setObjsVisible &&
                    layer.setObjsVisible(ids, true)
                })
              }
            })
            .catch((error) => {
              console.error(error)
            })
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.domain {
  margin-top: 12px;
}

.domain-item {
  margin: 10px 12px;
  padding: 10px 0;
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  .domain-item-left {
    flex: 1;
    height: 100%;
    float: right;
  }

  .domain-item-right {
    flex: 3;
    height: 100%;
    margin-left: 16px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 800;
    color: #ffffff;
  }

  .domain-item-right.is-active {
    color: #00d2ff;
  }
}

.domain-item.is-active {
  background: linear-gradient(
    180deg,
    rgba(11, 86, 111, 0.9),
    rgba(27, 63, 86, 0.9)
  );
  border-radius: 6px;
}
</style>
